<!--
 * @Description: 充值管理弹窗
 * @Author: 秦福凯
 * @Date: 2025-10-31 09:23:23
 * @LastEditTime: 2025-10-31 15:21:11
-->

<template>
  <u-dialog @close="dialogClose" :confirmBtn="'充值'" :show="show" v-bind="$attrs" width="65%" :title="$attrs.title || '充值'" class="u-common-Recharge-doalog" @submit="dialogSubmit">
    <div class="dialog-title-box" >
      <span class="dialog-title-box-title" >公告信息</span>
        <div style="border: 1px solid #ccc; margin-bottom: 10px">
          <!-- <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" /> -->
          <Editor
              style="min-height: 200px; overflow-y: auto"
              v-model="valueHtml"
              :defaultConfig="editorConfig"
              @onCreated="handleCreated"
          />
        </div>
    </div>

    <div class="dialog-title-box" >
      <span class="dialog-title-box-title" >充值信息</span>
      <u-form @fileUpload="fileUpload" style="margin-top: 24px;" ref="refform" v-loading="formloading" :element="formList" :form="form" >
      </u-form>
    </div>
  </u-dialog>
</template>

<script  setup>
import { watch } from 'vue';
import busi_servic from '@/api/busiApi'
import '@wangeditor/editor/dist/css/style.css'; // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import { shallowRef} from 'vue';

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();
const valueHtml = ref('<p>hello</p>');
const editorConfig = { placeholder: '请输入内容...',readOnly:true};
const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
}
const emits = defineEmits(['submit','close',])

let props = defineProps({
  show:{
    type:Boolean,
    default:false
  },
   type:{
    type:String,
    default:'add'
  },
  dialogForm:{
    type:Object,
    default:{
      id:''
    }
  }
})

function getMessage(){
  busi_servic.getPaidMent().then(res =>{
    if(res.data.code == 200){
      valueHtml.value = res.data.data.paidAnnouncement
    }
  })
}


// 弹窗里的表单参数
let form = reactive({
  id:"",
  paidRemake:'',
  paidType:'',
  rechargeAmount:0,
  paidImage:'',
})

const refform = ref(null)
let formloading = ref(false)

let formList = reactive([
  {label:'充值金额:',key:'rechargeAmount',type:'numInput',placeholder:"",sp:12,re:true},
  {label:'支付方式:',key:'paidType',type:'select',data:[
    {id:0,label:'微信'},
    {id:1,label:'支付宝'},
  ],placeholder:"",sp:12,re:true},
  {label:'支付截图:',key:'paidImage',type:'uploadImg',placeholder:"",sp:12,},

  {label:'支付备注:',key:'paidRemake',type:'textarea',sp:24,placeholder:"",},
])

 function fileUpload(file,fileList,index){
  getBase64(file.raw).then(resBase64 => {
      form.paidImage = "data:" + file.raw.type + ";base64," + resBase64.split(',')[1]
    })
 }




 function getBase64(file){
   return new Promise((resolve, reject) => {
    let reader = new FileReader
    let fileResult = ""
    reader.readAsDataURL(file)
        // 开始转
    reader.onload = function() {
      fileResult = reader.result
    }
      // 转失败
    reader.onerror = function(error) {
    reject(error)
    }
    // 结束，返回值
    reader.onloadend = function() {
      resolve(fileResult)
    }
  })
 }

 function dialogClose(){
    refform.value.soform.resetFields()
    for(let i in form){
      form[i] = ''
    }
    form.rechargeAmount = 0
    emits('close',)
 }

 function dialogSubmit(){
    refform.value.soform.validate((vali) =>{
    if(!vali){
      ElMessage.warning('请将表单填写完整!')
    }else{
      
      let parmas = {
        param:{
          ...JSON.parse(JSON.stringify(form)),
        }
      }
      const url = parmas.param.id == '' || parmas.param.id == undefined ? 'commitRecharge' : 'updateRecharge'
        formloading.value = true
        busi_servic[url](parmas).then(res =>{
          formloading.value = false
          if(res.data.code == 200){
            ElMessage.success(res.data.msg)
            dialogClose()
          }else{
            ElMessage.warning(res.data.msg)
          }
      })
   
    }
  })
 }

// 获取回显数据
function getEditData(val){
  for(let i in val){
    if(form[i] || form[i] == 0 || form[i] === false){
      form[i]  = val[i]
    }
  }
}

watch(() => props.show,(newValue, oldValue) => {
  if(newValue){
    getMessage()
    form.id = props.dialogForm.id
    if(props.type = 'edit'){
      getEditData(props.dialogForm)
    }
  }
},
{ immediate: true, deep: true })
</script>

<style lang="scss" scoped>
.u-common-Recharge-doalog{
  
}
</style>
